<template>
    <!--  <div class="card" :style="{ backgroundImage: `url(${movie?.poster_url})` }">-->
    <div class="card" :style="{ backgroundImage: `url(${movie?.mov_pic})` }">
        <div class="left">
            <div class="header">
                <div class="pic">
                    <img :src="movie?.poster_url" alt="电影海报" />
                </div>
                <h1 class="title">{{ movie?.mov_title }}</h1>
                <div class="score">
                    <span class="star" :style="{ backgroundPositionY: `${starImgPostion}px` }"></span>
                    <span class="score_text">{{ movie?.mov_rating }}</span>
                </div>
                <div class="info">
                    <div class="tags">
                        <span v-for="(item, index) in movie?.mov_type" :key="index">{{ item }}</span
                        ><span>{{ movie?.mov_year }}</span
                        ><span>{{ movie?.mov_area }}</span>
                    </div>
                    <div class="director">导演：{{ movie?.mov_director }}</div>
                </div>
            </div>
            <div class="word">{{ "“ " + movie?.mov_text + " ”" }}</div>
            <div class="intro">
                <p>{{ movie?.mov_intro }}</p>
                <a :href="movie?.mov_link">查看更多 →</a>
            </div>
        </div>
        <div class="right">
            <div class="pic">
                <img :src="movie?.poster_url" alt="电影海报" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { useHomeStore } from "@/store/home";
    import type { Movie } from "@/model/movie";

    const movie = ref<Movie>();
    const starImgPostion = ref();

    movie.value = useHomeStore().movieData;
    if (movie.value) starImgPostion.value = (Math.round(+movie.value.mov_rating) - 10) * 11;
    // const bgImg = ref()
    // const fetchMovieInfo = async () => {
    //   // const response = await fetch("https://api.codelife.cc/itab/todayMovie?lang=cn&version=v2", {method: 'get'})
    //   // const response = await fetch("http://139.224.239.6:3457/")
    //   // const { data } = await response.json()
    //
    //   const {data} = await api_get_movie_info()
    //   movie.value = data
    //   starImgPostion.value = (Math.round(+movie.value?.mov_rating) - 10) * 11
    //
    // }
    // fetchMovieInfo()
</script>

<style scoped>
    /*:global(body) {*/
    /*  padding: 0;*/
    /*  margin: 0;*/
    /*  width: 100%;*/
    /*  height: 100%;*/
    /*  display: flex;*/
    /*  justify-content: center;*/
    /*  align-items: center;*/
    /*  background-color: black;*/
    /*}*/

    .card {
        max-width: 980px;
        min-width: 460px;
        position: relative;
        top: 50%;
        transform: translate(0, -50%);
        margin: 0 auto;
        padding: 40px;
        display: flex;
        justify-content: space-evenly;
        background-size: cover;
        background-position: center;
        z-index: 122;
        border-radius: 10px;
        color: white;
    }

    .card::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: #1118;
        backdrop-filter: blur(20px);
        z-index: -1;
        border-radius: 10px;
    }

    .left {
        flex: 5;
        margin-right: 30px;
    }

    .header {
        color: #f9d5ad;
    }
    .header .pic {
        display: none;
    }
    .title {
        margin: 0;
        /*font-weight: bold;*/
        font-size: 38px;
        letter-spacing: 2px;
    }

    .score {
        font-size: 12px;
        padding: 15px 0 10px;
    }

    .star {
        display: inline-block;
        height: 11px;
        width: 55px;
        margin-right: 5px;
        background-image: url("../assets/rating_s@2x.png");
        background-size: cover;
    }

    .info {
        font-size: 14px;
        padding-bottom: 15px;
    }

    .info span {
        padding-right: 4px;
    }

    .tags {
        padding-bottom: 10px;
    }

    .word {
        padding: 10px 0;
        font-size: 18px;
        line-height: 26px;
        text-align: justify;
    }

    .intro {
        padding: 0;
        margin: 0;
        font-size: 14px;
        line-height: 22px;
        text-align: justify;
        color: rgb(239, 239, 239);
    }

    .intro a {
        color: #f9d5ad;
        font-size: 10px;
        text-decoration: none;
    }

    .right {
        flex: 2;
    }
    .pic img {
        width: 100%;
        border-radius: 5px;
    }
</style>

<style scoped>
    @media only screen and (max-width: 539px) {
        :global(body) {
            display: block;
        }
        .right {
            display: none;
        }
        .card {
            height: 100vh;
            min-width: 200px;
            padding: 20px;
            justify-content: center;
        }
        .left {
            width: 100%;
            margin: 0 auto;
        }
        .header .pic {
            width: 100%;
            padding: 10px 0 30px 0;
            display: flex;
            justify-content: center;
            /* align-items: flex-start; */
        }
        .pic img {
            max-width: 200px;
            border-radius: 0;
        }
    }
</style>
